<script setup lang="ts">
import { useAuth } from '@/stores/index'
import type { GoodsIconData, GoodsInfoResult } from '@/api/details/types'
import APIDetails from '@/api/details'
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus'
import { copyToClipboard } from '@/utils/index'
import { capitalizeFirstLetter } from '@/utils/index'

defineOptions({
    name: 'LinkIcon'
})
const { isNextOperation } = useAuth()

const $props = defineProps(['item'])
const $emit = defineEmits(['on-click-purchase'])

const goodsInfo = ref<any>({})
const $router = useRouter()

watch($props, (newValue) => {
    goodsInfo.value = newValue.item
}, { immediate: true })

function submitLinks() {
    const GoodsIconData: GoodsIconData = {
        type: (goodsInfo?.value?.type as string),
        id: (goodsInfo?.value?.id as number)
    }

    if (isNextOperation()) {
        APIDetails.setGoodsLikes(GoodsIconData).then(({ data }) => {
            goodsInfo.value.is_likes = data.is_likes
        })
    }
}

function submitCollection() {
    const GoodsIconData: GoodsIconData = {
        type: (goodsInfo?.value?.type as string),
        id: (goodsInfo?.value?.id as number)
    }
    if (isNextOperation()) {
        APIDetails.setCollection(GoodsIconData).then(({ data }) => {
            goodsInfo.value.is_collection = data.is_collection
        })
    }
}

function handleCopy() {
    if (isNextOperation()) {
        ElMessageBox.confirm(
            '是否复制当前商品链接？',
            '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            ElMessage({
                message: '复制成功',
                type: 'success',
                offset: 80
            })
            copyToClipboard(`${import.meta.env.VITE_APP_WEB_URL}/${goodsInfo.value.type}-details/${goodsInfo.value.id}?categoryType=${capitalizeFirstLetter(goodsInfo.value.type)}`)
        }).catch(() => {
            ElMessage.info('已取消')
        })
    }
}

</script>

<template>
    <div class="link-icon">
        <div @click="handleCopy">
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24.5435mm" height="24.5435mm"
                version="1.1"
                style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
                viewBox="0 0 117 117" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g>
                    <metadata id="CorelCorpID_0Corel-Layer" />
                    <path fill="#A1A1A1"
                        d="M28 25l27 0 0 7 -21 0c-2,0 -2,0 -2,2l0 49c0,2 0,2 2,2l49 0c2,0 2,0 2,-2l0 -21 7 0 0 27c0,2 -1,3 -3,3l-61 0c-2,0 -3,-1 -3,-3l0 -61c0,-2 1,-3 3,-3zm30 30c0,2 0,5 0,7 6,0 9,-3 12,-7 2,-5 3,-11 7,-15 5,-4 8,-5 12,-7l0 15 7 0 0 -24c0,-3 -1,-3 -3,-3l-25 0 0 7 16 0c-8,3 -12,6 -14,10 -4,5 -4,8 -5,10 -2,6 -3,7 -7,7z" />
                </g>
            </svg>
        </div>
        <div :class="{ active: goodsInfo?.is_likes == 1 }" @click="submitLinks">
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24.5435mm" height="24.5435mm"
                version="1.1"
                style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
                viewBox="0 0 92 92" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g>
                    <metadata id="CorelCorpID_0Corel-Layer" />
                    <g id="_2102181204592">
                        <path fill="#A1A1A1" stroke="#A1A1A1" stroke-width="0.285262"
                            d="M33 38l0 25c0,5 2,8 7,8 12,0 19,0 23,0 4,-1 6,-2 7,-5 3,-6 7,-16 9,-22 2,-7 0,-11 -8,-11 -3,0 -9,0 -16,0 2,-14 6,-13 -1,-19 -4,3 -13,12 -17,16 -2,2 -4,5 -4,8z" />
                        <polygon fill="#A1A1A1" points="16,69 27,69 27,35 16,35 " />
                    </g>
                </g>
            </svg>
        </div>
        <div :class="{ active: goodsInfo?.is_collection == 1 }" @click="submitCollection">
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24.5435mm" height="24.5435mm"
                version="1.1"
                style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
                viewBox="0 0 83 83" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g>
                    <path fill="#A1A1A1" stroke="#A1A1A1"
                        d="M42 15c14,0 26,12 26,26 0,15 -12,27 -26,27 -15,0 -27,-12 -27,-27 0,-14 12,-26 27,-26zm-1 1l7 16 17 2 -12 11 3 16 -15 -8 -14 8 3 -16 -12 -11 16 -2 7 -16z" />
                </g>
            </svg>
        </div>
        <div @click="$emit('on-click-purchase')">
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24.5435mm" height="24.5435mm"
                version="1.1"
                style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
                viewBox="0 0 76 76" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g>
                    <path fill="#A1A1A1" stroke="#A1A1A1"
                        d="M10 20l6 0c10,20 10,20 8,23 -2,3 -4,8 -2,11 -1,3 2,9 7,7 3,-1 4,-3 4,-5l17 0c-1,3 3,7 7,5 3,-1 4,-4 3,-6l0 -5 -32 0c-1,0 1,-5 2,-5 7,0 15,0 21,0 2,0 3,-1 4,-3 3,-4 8,-13 10,-17 1,-2 1,-5 -4,-5 -12,0 -26,0 -38,0 -3,-1 -2,-6 -6,-6l-7 0 0 6zm24 9l5 0 0 -5 4 0 0 5 5 0 0 4 -5 0 0 5 -4 0 0 -5 -5 0 0 -4z" />
                </g>
            </svg>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.link-icon {
    display: flex;

    div {
        width: 35px;
        height: 35px;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        cursor: pointer;
        border: 1px solid #A1A1A1;

        &:not(&:last-child) {
            margin-right: 15px;
        }

        svg {
            width: 35px;
            height: 35px;
        }

        img {
            width: 100%;
            height: 100%;
        }
    }

    .active {
        border-color: #F91414;

        svg {
            g {
                path {
                    fill: #F91414;
                    stroke: #F91414;
                }

                rect {
                    stroke: #F91414;
                }

                polygon {
                    fill: #F91414;
                }

                metadata {
                    fill: #F91414;
                }
            }
        }
    }
}
</style>
